<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
<select id="users"></select>
<script>
  let tree = [{
    name: '父亲',
    key: '1',
    children: [
      {
        name: '儿子',
        key: '1-1',
        children: [
          {
            name: '孙子',
            key: '1-1-1'
          }
        ]
      }
    ]
  }]
  function flattenAdapter(tree, flattenArray) {
    tree.forEach((item) => {
      if (item.children) {
        flattenAdapter(item.children, flattenArray)
      }
      flattenArray.push({ name: item.name, key: item.key })
    })
    return flattenArray
  }
  let array = [];
  flattenAdapter(tree, array);
  array.reverse();
  let users = document.getElementById('users');
  let options = array.map(item => `<option value="${item.key}">${item.name}</option>`).join('');
  users.innerHTML = options;
</script>
</body>
</html>
